<template>
  <el-dialog v-if="innerVisible"
             :title="title"
             append-to-body
             class="dialog-box"
             top="25vh"
             :before-close="handleClose"
             :visible.sync="innerVisible"
             :width="width">
    <slot></slot>
    <div slot="footer">
      <el-button type="default"
                 @click="handleClose">取消</el-button>
      <el-button v-if="okButton"
                 type="primary"
                 :loading="loading"
                 @click="container">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import TableScheduler from "@/libs/scheduler.js";
export default {
  model: {
    prop: "visible",
    event: "toggle"
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: "720px"
    },
    title: {
      type: String,
      default: ''
    },
    okButton: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit("close");
    },
    // 刷新batchEntry
    async handleAction (action) {
      let response = await TableScheduler.schedule(
        this.route?.params?.menuId,
        action
      );
      if (response?.code === 0) {
        console.log("刷新batchEntry");
      }
    },
    container () {
      this.$emit("container");
      this.handleAction([]);
    }
  }
};
</script>

<style scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 460px !important;
  overflow: auto !important;
}
</style>
